<template>
  <div>
    <RouterLink to="/">Home</RouterLink> &nbsp;&nbsp;|&nbsp;&nbsp;
    <RouterLink to="/about">About</RouterLink> &nbsp;&nbsp;|&nbsp;&nbsp;
    <RouterLink to="/login">Login</RouterLink>
  </div>
  <hr />
  <!-- <RouterView /> -->
  <!-- 过渡动效 -->
  <router-view v-slot="{ Component }">
    <transition name="xx" mode="out-in">
      <!-- 动态组件 keepAlive -->
      <component :is="Component" />
    </transition>
  </router-view>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({})
</script>

<style scoped>
.xx-enter-active,
.xx-leave-active {
  transition: opacity 0.5s ease;
}

.xx-enter-from,
.xx-leave-to {
  opacity: 0;
}
</style>
